<template>
	<view>
		<u-navbar title="SuperRank排名" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view style="right: 0rpx; left: 0rpx; position: absolute; top:0rpx">
			<image src="../static/paiming.png" class="topIv" mode="aspectFill"></image>
			<view class="titleV">
				<view class="paiHangV " @click="onSelectRanking(1)">
					<view :class="paiHangPos==1?'paiHangTv2':'paiHangTv1'">全国排行</view>
					<view :class="paiHangPos==1?'paiHangLine':'paiHangLineTo'"></view>
				</view>
				<view class="paiHangV" @click="onSelectRanking(2)">
					<view :class="paiHangPos==2?'paiHangTv2':'paiHangTv1'">全省排行</view>
					<view :class="paiHangPos==2?'paiHangLine':'paiHangLineTo'"></view>
				</view>
			</view>
			<view class="typeV">
				<z-tabs :list="tabList" bg-color="#E6A5B4" :tabs-style="tabsstyle" :active-style="activeStyle"
					:inactive-style="inactiveStyle" :bar-style="barstyle" @change="onChange"></z-tabs>
			</view>
			<view class="itemV" v-for="(item,key) in dataList" :key="key">
				<image v-if="key==0" class="itemV1" src="../static/ranking1.png"></image>
				<image v-if="key==1" class="itemV1" src="../static/ranking2.png"></image>
				<image v-if="key==2" class="itemV1" src="../static/ranking3.png"></image>
				<view v-if="key>2" class="itemV1">{{key+1}}</view>
				<image class="itemV2" :src="item.avatar"></image>
				<view class="itemV3">{{item.name}}</view>
				<view class="itemV4">{{item.rank_nums}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#FFFFFF"
				},
				tabsstyle: {
					"border-radius": "40rpx"
				},
				activeStyle: {
					"color": "#FFFFFF",
					"font-size": "32rpx",
					"border-radius": "40rpx"
				},
				inactiveStyle: {
					"color": "#FFFFFF",
					"font-size": "32rpx",
					"border-radius": "40rpx"
				},
				barstyle: {
					"background": "#E6A5B4",
				},
				tabList: [{
					name: '近三十日' //0
				}, {
					name: '年度累计' //1
				}, {
					name: '历史累计' //2
				}],
				paiHangPos: 1, //1 全国  2 全省
				timePos: 0,
				dataList: [],
			}
		},
		onLoad() {
			this.getRankList()
		},
		methods: {
			onChange(e) {
				this.timePos = e;
				this.getRankList();
			},
			onSelectRanking(e){
				this.paiHangPos = e;
				this.getRankList();
			},
			getRankList() {
				this.$api.getRankList({
					type: this.paiHangPos == 1 ? 'country' : 'city', //city 全城  country 全国
					date: this.timePos == 0 ? 'month' : this.timePos == 1 ? 'year' : 'all', //month 月  year年 all 历史
				}).then((res) => {
					this.dataList = res;
				}).catch((e) => {
					uni.$u.toast("获取信息失败");
				})
			},
		}
	}
</script>

<style lang="scss">
	.topIv {
		width: 100%;
		height: 380rpx;
	}

	.titleV {
		margin-left: 180rpx;
		margin-right: 180rpx;
		display: flex;

		.paiHangV {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.paiHangTv1 {
				font-size: 36rpx;
				color: #333333;
			}

			.paiHangTv2 {
				font-size: 36rpx;
				color: #E6A5B4;
			}

			.paiHangLine {
				width: 60rpx;
				height: 6rpx;
				background: #E6A5B4;
				border-radius: 5px;
				margin-top: 10rpx;
			}

			.paiHangLineTo {
				width: 60rpx;
				height: 6rpx;
				background: #00000000;
				border-radius: 5px;
				margin-top: 10rpx;
			}
		}
	}

	.typeV {
		background: #333333;
		border-radius: 40rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
		margin-top: 50rpx;

	}

	.itemV {
		width: 100%;
		height: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.itemV1 {
			width: 45rpx;
			height: 60rpx;
			font-size: 36rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.itemV2 {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-left: 10rpx;
		}

		.itemV3 {
			font-size: 28rpx;
			color: #333333;
			margin-left: 10rpx;
			flex: 6;
		}

		.itemV4 {
			font-size: 28rpx;
			color: #333333;
			flex: 1;
		}
	}
</style>
